<template>
  <div class="table-box">
    <ProTable :columns="columnList" :data="datas" ref="proTable">
      <template #searchFormBtn>
        <!--        <el-button type="primary" @click="updateTableConfig"> 保存搜索默认值</el-button>-->
      </template>
      <!-- 表格 header 按钮 -->
      <template #tableHeader>
        <el-space :size="4" spacer=" ">
          <el-button type="primary" :icon="CirclePlus" disabled>新增</el-button>
          <template v-if="aggColumn.length > 0">
            <el-space :size="4" spacer=":" v-for="item in aggColumn" :key="item.id">
              <el-text class="mx-1" size="default">{{ item.columnName }}</el-text>
              <el-text class="mx-1" size="default">0</el-text>
            </el-space>
          </template>
        </el-space>
      </template>
      <!-- Expand -->

      <template #operation>
        <el-button type="info" link disabled :icon="View">查看</el-button>
        <el-button type="primary" link disabled :icon="EditPen">编辑</el-button>
        <el-button type="danger" link disabled :icon="Delete">删除</el-button>
      </template>
    </ProTable>
  </div>
</template>

<script setup lang="tsx" name="previewSelect">
import { computed, onMounted, provide, reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { usePackDimension } from "@/hooks/usePackDimension";
import ProTable from "@/components/ProTable/index.vue";
import { ProTableInstance } from "@/components/ProTable/interface";
import { CirclePlus, Delete, EditPen, View } from "@element-plus/icons-vue";
import { API } from "@/api/modules/dwh/typings";
import { tableColumnController } from "@/api/modules/dwh";
import { ElMessage } from "element-plus";
import { useDimensionOptions } from "@/hooks/useDimensionOptions";

const router = useRouter();
const route = useRoute();

provide("showColSettingShow", false);
provide("disableSearch", true);
provide("disableReset", true);
const datas = ref([]);

// 表格配置项
// ProTable 实例
const proTable = ref<ProTableInstance>();

const tableInfo = reactive({ tableInfoId: route.params.id, tableInfos: [] });

const tableColumnVos = ref<API.TableColumnVo[]>([]);

const enumMap = ref(new Map<string, any>());

onMounted(async () => {
  const { data } = await tableColumnController.listUsingGET({ param: Number(tableInfo.tableInfoId) });
  tableColumnVos.value = data;
  tableColumnVos.value.forEach(item => {
    let { columnOptions } = useDimensionOptions(item.columnOptions);
    enumMap.value.set(item.columnCode, columnOptions);
  });
  console.log(enumMap.value, "----------enumMap.value---");
});
const { columnList, searchParam, aggColumn, validateRefs } = usePackDimension(tableColumnVos, enumMap);

columnList.value.push({ prop: "operation", label: "操作", fixed: "right", width: 225 });

datas.value.push({});

const sortColumnsList = computed(() => {
  return columnList.value.filter(col => col.prop != "operation" && col.prop != "sort");
});

const sortColumns = (newIndex: number, oldIndex: number) => {
  const src = sortColumnsList.value.at(oldIndex);
  const target = sortColumnsList.value.at(newIndex);

  tableColumnController
    .sortTableColumnUsingPOST({
      id: src.srcColumn.id as number,
      orderNo: target.srcColumn.orderNo!
    })
    .then(res => {
      let splice = columnList.value.splice(columnList.value.indexOf(src), 1);
      columnList.value.splice(columnList.value.indexOf(target), 0, splice[0]);
      ElMessage.success("修改列表排序成功");
    });
};

provide("sortColumns", sortColumns);
</script>
